<template>
  <div>
    <!-- 增加商品按钮 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin: 10px 0px"
      @click="addWares"
      >增加商品</el-button
    >
    <el-card style="margin: 20px 0px">
      <!-- 选择主类 -->
      <el-select
        v-model="mainClassId"
        placeholder="选择主类"
        style="width: 150px"
      >
        <div v-for="item in mainList" :key="item.mainClassId">
          <el-option
            :label="item.mainClassName"
            :value="item.mainClassId"
          ></el-option>
        </div>
      </el-select>
      <!-- 选择副类 -->
      <el-select
        v-model="otherClassId"
        placeholder="选择副类"
        style="width: 150px; margin-left: 10px"
      >
        <div v-for="item in otherList" :key="item.otherClassId">
          <el-option
            :label="item.otherClassName"
            :value="item.otherClassId"
          ></el-option>
        </div>
      </el-select>
      <el-button
        type="success"
        icon="el-icon-tickets"
        style="margin-left: 20px"
        @click="mainClassId = ''"
        >清除类别选择</el-button
      >
      <el-button
        type="success"
        icon="el-icon-tickets"
        style="margin-left: 20px"
        @click="searchByWaresState"
        >下架商品</el-button
      >
      <div style="float: right; margin: 0px 10px">
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          style="width: 150px"
          @keyup.enter.native="searchWares"
        ></el-input>
        <el-button type="success" icon="el-icon-search" @click="searchWares"
          >搜索</el-button
        >
      </div>
    </el-card>
    <!-- 显示商品 -->
    <el-card>
      <el-table style="width: 100%; margin-top: 50px" border :data="waresList">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="prop"
          label="商品名"
          width="200px"
        ><template slot-scope="{ row }">
            <div class="block">
              <a :href='waresDetailUrl+row.waresId' target="_Blank">{{ row.waresName }}</a>
            </div> </template
        ></el-table-column>
        <el-table-column prop="waresDetail" label="商品详情"></el-table-column>
        <el-table-column
          prop="prop"
          label="商品图片"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div class="block">
              <el-carousel
                height="70px"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item v-for="item in row.pictureList" :key="item">
                  <img :src="item" alt="123" width="70px" height="70px" />
                </el-carousel-item>
              </el-carousel>
            </div> </template
        ></el-table-column>
        <el-table-column
          prop="waresNumber"
          label="商品数"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="waresState"
          label="商品状态"
          width="200px"
          align="center"
        ></el-table-column>
        <el-table-column prop="prop" label="操作" width="300px">
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              icon="el-icon-edit"
              @click="changeWares(row)"
              >修改商品</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteWares(row.waresId)"
              >删除商品</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchParams.pageSize"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加商品 -->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible1">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="商品名称"
          :label-width="formLabelWidth"
          prop="waresName"
        >
          <el-input
            type="text"
            v-model="form.waresName"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品简介"
          :label-width="formLabelWidth"
          prop="waresDetail"
        >
          <el-input
            type="text"
            v-model="form.waresDetail"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品价格"
          :label-width="formLabelWidth"
          style="width: 300px"
          prop="waresPrice"
        >
          <el-input
            v-model="form.waresPrice"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品库存"
          :label-width="formLabelWidth"
          style="width: 300px"
          prop="waresNumber"
        >
          <el-input
            v-model="form.waresNumber"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品主类"
          :label-width="formLabelWidth"
          prop="mainClassId"
        >
          <el-select v-model="form.mainClassId" placeholder="查看主类">
            <div v-for="item in mainList" :key="item.mainClassId">
              <el-option
                :label="item.mainClassName"
                :value="item.mainClassId"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品副类"
          :label-width="formLabelWidth"
          prop="otherClassId"
        >
          <el-select v-model="form.otherClassId" placeholder="查看副类">
            <div v-for="item in formOtherList" :key="item.otherClassId">
              <el-option
                :label="item.otherClassName"
                :value="item.otherClassId"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="/api/wares/upload"
            :data="file"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-change="changeUpload"
            :before-upload="beforeUpload"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary" @click="changeSign"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件,且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item
          :label-width="formLabelWidth"
          class="form-item-content"
          prop="marketing"
          label="商品详情"
          :rules="{
            required: true,
            message: '请输入商品详情',
            trigger: 'blur',
          }"
        >
          <el-upload
            class="avatar-uploader-img"
            action="/api/wares/upload"
            :show-file-list="false"
            :on-success="uploadImgSuccess"
            :before-upload="beforeUploadImg"
            :on-error="uploadImgError"
            :data="file"
          />
          <el-upload
            class="avatar-uploader-video"
            action="/api/wares/upload"
            :show-file-list="false"
            :on-success="uploadVideoSuccess"
            :before-upload="beforeUploadVideo"
            :on-error="uploadVideoError"
            :data="file"
          />
          <quill-editor
            ref="myQuillEditor"
            v-model="form.marketing"
            class="editor"
            :options="editorOption"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addOrUpdateWares"
          v-if="form.waresId == ''"
          >创建商品</el-button
        >
        <el-button type="primary" @click="addOrUpdateWares" v-else
          >修改商品</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ script: "sub" }, { script: "super" }], // 上标/下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  // ['link', 'image', 'video'] // 链接、图片、视频
  ["link", "image", "video"], // 链接、图片
];
export default {
  name: "Commodity",

  data() {
    var valiNumberPass1 = (rule, value, callback) => {
      //表单校验包含小数的正数
      let reg = /^[+]?(([1-9]\d*))(\.\d+)?$/g;
      if (value === "") {
        callback(new Error("请输入内容"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入大于0的数字"));
      } else {
        callback();
      }
    };
    var valiNumberPass2 = (rule, value, callback) => {
      //表单校验正整数
      let reg = /^[+]{0,1}(\d+)$/g;
      if (value === "") {
        callback(new Error("请输入内容"));
      } else if (!reg.test(value) || value == 0) {
        callback(new Error("请输入0以上的整数"));
      } else {
        callback();
      }
    };
    return {
      waresDetailUrl:'http://120.55.64.65/#/detail/',
      file: {
        sign: "1",
      },
      fileList: [],
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      total: 0,
      waresList: [],
      mainList: [],
      otherList: [],
      formOtherList: [],
      mainClassId: "",
      otherClassId: "",
      keyword: "",
      searchParams: {
        //分类id
        mainClassId: "",
        otherClassId: "",
        keyword: "",
        //分类名字
        className: "",
        //分页器,当前第几页
        pageNo: 1,
        //每页的数量
        pageSize: 5,
        //检索下架商品
        waresState: 0,
      },
      form: {
        waresId: "",
        waresName: "",
        waresPrice: "",
        waresNumber: "",
        waresState: 1,
        waresPicture: "",
        mainClassId: "",
        otherClassId: "",
        waresDetail: "",
        marketing: "",
      },
      rules: {
        waresName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        waresDetail: [
          { required: true, message: "请输入商品简介", trigger: "blur" },
        ],
        waresPrice: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { type: "number", validator: valiNumberPass1, trigger: "blur" },
        ],
        waresNumber: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
          { type: "number", validator: valiNumberPass2, trigger: "blur" },
        ],
        mainClassId: [
          { required: true, message: "请选择主类", trigger: "blur" },
        ],
        otherClassId: [
          { required: true, message: "请选择副类", trigger: "blur" },
        ],
        marketing: [
          { required: true, message: "请输入商品详情", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      editorOption: {
        // 编辑框操作事件
        theme: "snow", // or 'bubble'
        placeholder: "您想发布点什么？",
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                // 上传图片
                if (value) {
                  document.querySelector(".avatar-uploader-img input").click(); // 触发input框选择文件
                } else {
                  this.quill.format("image", false);
                }
              },
              link: function (value) {
                // 添加链接
                if (value) {
                  var href = prompt("请输入url");
                  this.quill.format("link", href);
                } else {
                  this.quill.format("link", false);
                }
              },
              video: function (value) {
                // 上传视频
                if (value) {
                  document
                    .querySelector(".avatar-uploader-video input")
                    .click(); // 触发input框选择文件
                } else {
                  this.quill.format("video", false);
                }
              },
            },
          },
        },
      },
    };
  },

  mounted() {
    this.getMainClassList();
    this.getWaresList();
  },

  methods: {
    //设置时间戳来防止图片重名
    changeSign() {
      this.file.sign = Date.now();
    },
    changeUpload(file, fileList) {
      if (
        file.raw.type !== "image/png" &&
        file.raw.type !== "image/jpg" &&
        file.raw.type !== "image/jpeg"
      ) {
        this.$message.error("只支持jpg|png|jpeg格式的文档！");

        return;
      }

      let AllCount = fileList.length;

      this.maxFileLen = Math.max(AllCount, this.maxFileLen);

      setTimeout(() => {
        if (AllCount != this.maxFileLen) return;

        this.$refs["fileList"].clearFiles();

        this.beforeUpload(fileList);
      }, 0);
    },
    handleRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (
          this.fileList[i].name == file.name &&
          this.fileList[i].url == file.url
        ) {
          this.fileList.splice(i, 1);
        }
      }
    },
    beforeUpload(file) {
      for (let i of this.fileList) {
        if (i.name == file.name) {
          this.$message({
            message: "图片已经存在",
            type: "warn",
          });
          return false;
        }
      }
    },
    handleUploadSuccess(res, file, fileList) {
      let newFile = { name: "", url: "" };
      newFile.name = file.name;
      newFile.url = res.data;
      this.fileList.push(newFile);
    },
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
      this.getWaresList();
    },
    handleCurrentChange(pager) {
      this.searchParams.pageNo = pager;
      this.getWaresList();
    },
    //获取所有主类
    async getMainClassList() {
      let result = await this.$API.category.reqMainClassesList();
      if (result.code == 200) {
        this.mainList = result.data;
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //获取所有商品
    async getWaresList() {
      let result = await this.$API.commodity.reqWaresList(this.searchParams);
      if (result.code == 200) {
        this.waresList = result.data.waresList;
        this.total = result.data.total;
        for (let wares of this.waresList) {
          wares.waresState = this.changeWaresState(wares.waresState);
        }
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //正常显示商品状态
    changeWaresState(waresState) {
      switch (waresState) {
        case 1:
          return "出售状态";
        case 2:
          return "冻结状态";
        default:
          return "下架状态";
      }
    },
    //返回商品状态属性
    returnWaresState(waresState) {
      switch (waresState) {
        case "出售状态":
          return 1;
        case "冻结状态":
          return 2;
        default:
          return 3;
      }
    },
    //用关键词搜索商品
    searchWares() {
      this.searchParams.keyword = this.keyword;
      this.keyword = "";
      this.getWaresList();
    },
    //删除商品
    async deleteWares(waresId) {
      let result = await this.$API.commodity.reqDeleteWares(waresId);
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        });
        this.getWaresList();
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    changeWares(row) {
      this.form = this.deepClone(row) || {};
      this.fileList = [];
      for (let url of row.pictureList) {
        let picture = {};
        let name = url.match(/\/([^/]*)$/)[1];
        picture.name = name;
        picture.url = url;
        this.fileList.push(picture);
      }
      this.dialogFormVisible1 = true;
    },
    addWares() {
      this.fileList = [];
      for (let f in this.form) {
        this.form[f] = "";
      }
      this.dialogFormVisible1 = true;
    },
    //增加或修改商品
    async addOrUpdateWares() {
      const formArr = this.$refs.form.fields.map((item) => {
        return item.validateState;
      });
      let success=true;
      //表单校验
      for(let i=0;i<4;i++){
        if(formArr[i]!='success'){
          success=false;
        }
      }
      if(success){
        this.form.waresPicture = "";
      let form = this.form;
      for (let file of this.fileList) {
        if (this.form.waresPicture) {
          form.waresPicture += ";" + file.url;
        } else {
          form.waresPicture = file.url;
        }
      }
      if (
        form.waresName &&
        form.waresDetail &&
        form.waresNumber &&
        form.marketing &&
        form.mainClassId &&
        form.otherClassId &&
        form.waresPicture
      ) {
        if (isNaN(this.form.waresState)) {
          this.form.waresState = this.returnWaresState(this.form.waresState);
        } else {
          this.form.waresState = 1;
        }
        let result = await this.$API.commodity.reqAddOrUpdateWares(this.form);
        if (result.code == 200) {
          this.$message({
            message: result.data,
            type: "success",
          });
          this.dialogFormVisible1 = false;
          this.getWaresList();
          for (let f in form) {
            form[f] = "";
          }
        } else {
          return Promise.reject(new Error("false"));
        }
      } else {
        this.$message({
          message: "请确保所有值都已输入",
          type: "warning",
        });
      }
      }else{
        this.$message({
          message: "请确保所有值都符合标准",
          type: "warning",
        });
      }
      
    },
    searchByWaresState() {
      this.searchParams.waresState = 3 - this.searchParams.waresState;
      this.getWaresList();
    },
    //深拷贝
    deepClone(target, map = new Map()) {
      //检测数据类型
      if (typeof target !== "object" || target === null) {
        // target 是 null ，或者不是对象和数组，说明是原始类型,直接返回
        return target;
      } else {
        //克隆数据前，先进行判断数据之前是否克隆过
        let cache = map.get(target);
        //如果克隆过,直接返回映射中键对应的值,绕开了递归
        if (cache) {
          return cache;
        }
        //创建一个容器,存储数组或者对象
        const result = Array.isArray(target) ? [] : {};
        //注意:map.set()传入的值是按引用传入,后序result改变也会影响map中保存的状态
        map.set(target, result);
        //遍历target
        for (let key in target) {
          //检测该属性是否为对象本身的属性(不能拷贝原型对象的属性)
          if (target.hasOwnProperty(key)) {
            result[key] = this.deepClone(target[key], map);
          }
        }
        return result;
      }
    },
    // 富文本图片上传前
    beforeUploadImg(file) {
      this.changeSign();
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG, GIF 格式!");
      } else {
        // 显示loading动画
        this.quillUpdate = true;
      }
      return isJPG;
    },
    // 富文本视频上传前
    beforeUploadVideo(file) {
      this.changeSign();
      const isVideo = file.type === "video/mp4";
      if (!isVideo) {
        this.$message.error("上传视频只能是 mp4 格式!");
      } else {
        // 显示loading动画
        this.quillUpdate = true;
      }
      return isVideo;
    },
    // 上传成功
    uploadImgSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == "200" && res.data != null) {
        // 获取光标所在位置
        const length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading动画消失
      this.quillUpdate = false;
    },
    uploadVideoSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == "200" && res.data != null) {
        // 获取光标所在位置
        const length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, "video", res.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("视频插入失败");
      }
      // loading动画消失
      this.quillUpdate = false;
    },
    // 上传失败
    uploadImgError() {
      // loading动画消失
      this.quillUpdate = false;
      this.$message.error("图片插入失败");
    },
    uploadVideoError() {
      // loading动画消失
      this.quillUpdate = false;
      this.$message.error("视频插入失败");
    },
  },
  computed: {
    formMainClassId() {
      return this.form.mainClassId;
    },
  },
  watch: {
    //二级分类联动
    mainClassId() {
      this.searchParams.mainClassId = this.mainClassId;
      this.getWaresList();
      if (this.mainClassId == "") {
        this.otherList = [];
        this.otherClassId = "";
      } else {
        for (let mainClass of this.mainList) {
          if (mainClass.mainClassId == this.mainClassId) {
            this.otherList = mainClass.otherClasses;
          }
        }
      }
    },
    otherClassId() {
      this.searchParams.otherClassId = this.otherClassId;
      this.getWaresList();
    },
    formMainClassId() {
      if (this.formMainClassId == "") {
        this.formOtherList = [];
      } else {
        for (let mainClass of this.mainList) {
          if (mainClass.mainClassId == this.formMainClassId) {
            this.formOtherList = mainClass.otherClasses;
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader-img {
  height: 0;
}
.avatar-uploader-video {
  height: 0;
}
::v-deep .ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
::v-deep .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
::v-deep .ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label::before,
::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="small"]::before,
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="large"]::before,
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-label[data-value="huge"]::before,
::v-deep
  .ql-snow
  .ql-picker.ql-size
  .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
::v-deep .ql-snow .ql-picker.ql-font .ql-picker-label::before,
::v-deep .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
::v-deep
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="serif"]::before,
::v-deep
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
::v-deep
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="monospace"]::before,
::v-deep
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>